<template>
  <view class="topic-content-page">
    <!-- 返回按钮 -->
    <view class="back-btn" @click="goBack">←</view>

    <!-- 话题Tab导航 -->
    <view class="topic-tabs">
      <view 
        class="tab-item" 
        v-for="tab in topicTabs" 
        :key="tab.id" 
        :class="{ active: currentTab === tab.id }" 
        @click="switchTab(tab.id)"
      >
        {{ tab.name }}
      </view>
      <view class="search-btn" @click="openSearch">🔍</view>
    </view>

    <!-- 话题列表 -->
    <view class="topic-list">
      <!-- 空数据提示 -->
      <view class="empty-tip" v-if="topicList.length === 0">
        暂无相关话题~
      </view>
      
      <view class="topic-item" v-for="topic in topicList" :key="topic.id">
        <!-- 话题标签+内容 -->
        <text class="topic-tag">#{{ topic.title }}#</text>
        <text class="topic-content">{{ topic.content }}</text>
        <!-- 互动数据 -->
        <view class="topic-meta">
          <text class="hot-tag" v-if="topic.isHot">热</text>
          <text>{{ topic.viewCount }}观点</text>
        </view>
        <!-- 发布者信息 -->
        <view class="publisher-info">
          <image 
            :src="topic.publisherAvatar || '/static/avatar-default.png'" 
            class="publisher-avatar" 
            mode="aspectFill"
          />
          <text class="publisher-name">{{ topic.publisher }}</text>
        </view>
      </view>
    </view>

    <CustomTabBar />
  </view>
</template>

<script setup>
import { ref, onLoad, onMounted } from 'vue';
import CustomTabBar from '@/components/CustomTabBar.vue';

// 话题Tab
const topicTabs = ref([
  { id: 1, name: "追踪" },
  { id: 2, name: "话题榜" },
  { id: 3, name: "观点榜" }
]);
const currentTab = ref(2);

// 话题数据
const topicList = ref([
  {
    id: 1, 
    title: "曼联客场不败场次在英超排名第二",
    content: "曼联客场对阵阿斯顿维拉...最终红魔以3-1的比分战胜了对手。",
    viewCount: 119, 
    isHot: true,
    publisher: "体育编辑", 
    publisherAvatar: "/static/avatar/author1.png"
  },
  {
    id: 2, 
    title: "2025年经济走势预测",
    content: "专家分析2025年全球经济将呈现温和复苏态势，新兴产业将成为增长点。",
    viewCount: 892, 
    isHot: false,
    publisher: "财经评论员", 
    publisherAvatar: "/static/avatar/author2.png"
  }
]);

// 页面加载时获取参数
onLoad((options) => {
  if (options && options.id) {
    const topicId = options.id;
    console.log("当前话题ID：", topicId);
    // 实际项目中根据ID请求数据
    // fetchTopicData(topicId).then(data => {
    //   topicList.value = data;
    // });
  }
});

// 切换Tab
const switchTab = (tabId) => {
  currentTab.value = tabId;
  // 实际项目中根据Tab切换请求对应数据
  // loadTabData(tabId);
};

// 返回上一页
const goBack = () => {
  uni.navigateBack({
    delta: 1
  });
};

// 打开搜索
const openSearch = () => {
  uni.showToast({
    title: "搜索功能待开发",
    icon: "none"
  });
};
</script>

<style scoped>
.topic-content-page {
  padding: 20rpx;
  min-height: 100vh;
  padding-bottom: 60px;
  background-color: #f5f5f5;
}

/* 返回按钮 */
.back-btn {
  font-size: 32rpx;
  margin-bottom: 20rpx;
  color: #333;
  padding: 10rpx;
}

/* Tab导航 */
.topic-tabs {
  display: flex;
  align-items: center;
  background-color: #fff;
  border-radius: 8rpx;
  padding: 0 10rpx;
  margin-bottom: 20rpx;
}

.tab-item {
  flex: 1;
  text-align: center;
  padding: 15rpx 0;
  font-size: 28rpx;
  position: relative;
}

.tab-item.active {
  color: #ff3333;
}

.tab-item.active::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 40rpx;
  height: 4rpx;
  background-color: #ff3333;
  border-radius: 2rpx;
}

.search-btn {
  font-size: 28rpx;
  padding: 0 15rpx;
}

/* 话题列表 */
.topic-list {
  background-color: #fff;
  border-radius: 8rpx;
  padding: 20rpx;
}

.empty-tip {
  text-align: center;
  padding: 40rpx 0;
  color: #999;
  font-size: 26rpx;
}

.topic-item {
  padding: 20rpx 0;
  border-bottom: 1rpx solid #eee;
}

.topic-item:last-child {
  border-bottom: none;
}

.topic-tag {
  font-size: 28rpx;
  color: #ff3333;
  font-weight: 500;
  display: block;
  margin-bottom: 10rpx;
}

.topic-content {
  font-size: 26rpx;
  line-height: 36rpx;
  color: #333;
  margin-bottom: 15rpx;
  display: block;
}

.topic-meta {
  display: flex;
  align-items: center;
  margin-bottom: 15rpx;
  font-size: 24rpx;
  color: #666;
}

.hot-tag {
  background-color: #ff3333;
  color: #fff;
  font-size: 20rpx;
  padding: 2rpx 8rpx;
  border-radius: 4rpx;
  margin-right: 10rpx;
}

/* 发布者信息 */
.publisher-info {
  display: flex;
  align-items: center;
}

.publisher-avatar {
  width: 40rpx;
  height: 40rpx;
  border-radius: 50%;
  margin-right: 10rpx;
}

.publisher-name {
  font-size: 24rpx;
  color: #999;
}
</style>